<template>
  <div>
    <!-- 返回上一级 -->

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-button
            style="float:right"
            size="small"
            @click="$router.push('/home/user')"
            type="primary"
          >返回</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 用户信息 -->
    <section>
      <el-table
        :show-header="false"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :cell-style="columnStyle"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="ID" width="240">
          <template>
            <div>
              <img :src="dataForm.headPic" />
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180" prop="name"></el-table-column>
        <el-table-column prop="amount1"></el-table-column>
        <el-table-column width="180" prop="amount2"></el-table-column>
        <el-table-column prop="amount3"></el-table-column>
      </el-table>
    </section>

    <!-- 个人地址 -->
    <i class="el-icon-s-flag f1">地址信息</i>
    <el-table :data="AddresList" height="250" border style="width: 100%">
      <el-table-column prop="contact" label="姓名" width="220"></el-table-column>
      <el-table-column prop="phone" label="手机号码" width="220"></el-table-column>
      <el-table-column prop="address" label="详细地址" width="480"></el-table-column>
      <el-table-column label="默认地址">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDefault"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="toAddress(scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单信息 -->
    <i class="el-icon-s-flag f1">订单信息</i>
    <el-table :data="orderList" height="500" border style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="180"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
      <el-table-column prop="username" label="用户账号" width="180"></el-table-column>
      <el-table-column prop="totalMoney" label="订单金额"></el-table-column>
      <el-table-column  label="支付方式">
         <template slot-scope="scope">
          <span v-if="scope.row.payType == 3">银联支付</span>
          <span v-if="scope.row.payType == 2">支付宝</span>
          <span v-if="scope.row.payType == 1">微信支付</span>
          <span v-if="scope.row.payType == 0">货到付款</span>
        </template>
      </el-table-column>
      <el-table-column  label="订单状态">
       <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 1">待发货</span>
          <span v-if="scope.row.orderStatus == 2">已发货</span>
          <span v-if="scope.row.orderStatus == 3">已完成</span>
          <span v-if="scope.row.orderStatus == 4">已关闭</span>
          <span v-if="scope.row.orderStatus == 0">待付款</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="details(scope.row)">查看订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      userby: {},
      sex: "男",
      isEmailCheck: "是",
      AddresList: [],
      orderList: [],
      dataForm: {},
      // 当前页码
      currentPage: 1,
      // 页大小
      pageSize: 10,
      // 页大小列表
      pageSizeList: [10, 20, 50, 100],
      // 总记录数
      total: 0,
      //查询数据
      tbOrder: {}
    }
  },
  computed: {
    //因为数据用到了dataform中的数据，所以写在了computed中
    tableData () {
      return [
        {
          id: this.dataForm.headImg,
          name: "用户ID",
          amount1: this.dataForm.username,
          amount2: "注册时间",
          amount3: this.dataForm.created
        },
        {
          id: this.dataForm.headImg,
          name: "昵称",
          amount1: this.dataForm.nickName,
          amount2: "手机号码",
          amount3: this.dataForm.phone
        },
        {
          id: this.dataForm.headImg,
          name: "性別",
          amount1: this.dataForm.sex == '1' ? '男' : '女',
          amount2: "会员等级",
          amount3: this.dataForm.userLevel
        },
        {
          id: this.dataForm.headImg,
          name: "生日",
          amount1: this.dataForm.birthday,
          amount2: "积分",
          amount3: this.dataForm.points
        }
      ];
    }
  },
  methods: {
    //修改默认地址
    async toAddress (id) {
      // console.log(id)
       const { data: res } = await this.$http.get(`vi/user/address/updatetoAddress/${this.$route.query.username}/${id}`)
       this.getAddressList()
    },
    //查看订单
    details (row) {
      this.$router.push({
        query: {
          id: row.id
        },
        path: "/home/order/orderDetails"
      });
    },
    //获取用户信息
    async getUserList () {
      const { data: res } = await this.$http.get(`vi/user/user/findById?username=${this.$route.query.username}`)
      this.dataForm = res.data.tbUser
    },
    //获取地址信息
    async getAddressList () {
      const { data: res2 } = await this.$http.get(`vi/user/address/findAddressList?username=${this.$route.query.username}`)
      this.AddresList = res2
    },
    //获取订单信息
    async getOrderList () {
      this.tbOrder.username = this.$route.query.username
      const { data: res3 } = await this.$http.post(`vi/order/order/pageQueryByAll/${this.currentPage}/${this.pageSize}`, this.tbOrder)
      this.total = res3.data.pageUtils.total
      this.orderList = res3.data.pageUtils.rows
    },
    // 页大小改变
    async handleSizeChange (val) {
      this.pageSize = val
      this.getOrderList()
    },
    // 页码改变
    async handleCurrentChange (val) {
      this.currentPage = val
      this.getOrderList()
    },
    // 自定义列背景色
    columnStyle ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
      } else {
        return "background:#ffffff;";
      }
    },
    // 和并列
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  },

  // 钩子函数
  async created () {
    this.getUserList()
    this.getAddressList()
    this.getOrderList()
  }
}
</script>

<style>
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #d3d3e9;
}
.bg-purple-light1 {
  background: #b5b6c4;
}
.bg-purple-tx {
  background: #b5b6c4;
}
.bg-purple-mz {
  background: #b5b6c4;
}
.grid-content {
  min-height: 36px;
}
.grid-nr {
  min-height: 200px;
}
.grid-wi {
  min-height: 200px;
  width: 262px;
}
.grid-tx {
  min-height: 150px;
  width: 150px;
}
.grid-mz {
  min-height: 50px;
  width: 190px;
}
.wi {
  width: 180px;
}
.f1 {
  padding-top: 40px;
}
</style>
